<template>
  <div class="follow">
    <el-row type="flex" align="middle" class="item" v-for="(item, index) in data" :key="index">
      <edu-avatar :size="56" :src="item.avatar_url" @click="goUser(item.user_id)"></edu-avatar>
      <div class="desc">
        <div class="name" @click="goUser(item.user_id)">{{ item.nick_name }}</div>
        <div class="signature">{{ item.signature }}</div>
      </div>
    </el-row>
    <edu-pagination @handleCurrentChange="handleCurrentChange"></edu-pagination>
  </div>
</template>

<script>
import EduPagination from '@/components/EduPagination'
export default {
  components: {
    EduPagination
  },
  props: ['data'],
  mounted() {},
  methods: {
    // 分页
    handleCurrentChange() {
      this.$emit('pagination')
    },
    // 关注别人
    handleUserFollow(id) {
      this.$emit('focus', id)
    },
    // 取消别人
    handleUserFancelCancel(id) {
      this.$emit('cancel', id)
    },
    goUser(id) {
      this.$router.push({
        path: '/user',
        query: {
          id: id
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.follow {
  padding: 0 40px 40px 20px;
  .item {
    & + .item {
      margin-top: 20px;
    }
    .name {
      font-size: 15px;
      color: $text-color-import;
      cursor: pointer;
    }
    .signature {
      margin-top: 10px;
      font-size: 13px;
      color: $text-color-auxiliary;
      @include ellipsis();
    }
    .desc {
      flex: 1;
      min-width: 0;
      margin-left: 20px;
    }
  }
}
</style>
